<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Beehive - 反馈</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script th:src="@{/js/jquery-3.4.0.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/vue.js}"></script>



    <style>
        a {
            color: #51a0e3;
        }

        a:hover {
            color: #51a0e3;
        }
    </style>

</head>
<body style="background-color: rgb(242,245,248)">
<div style="margin: 80px auto 0; width: 770px; background-color: #fff; border-radius: 10px">
    <div>
        <div>
            <img th:src="@{/img/logo_lg.png}" style="margin: 10px 10px" width="50px" height="50px">
            <a th:href="@{/index.html}" style="text-decoration: none; margin-right: 20px;
                                                margin-top: 38px; float: right">首页</a>
        </div>
    </div>
    <div id="app" style="border-top: 1px solid #eeeeee; padding-bottom: 50px">
        <h5 style="margin: 30px 0 20px 30px; font-size: 17px">反馈表单</h5>
        <p style="color: #999999; margin: 0 0 10px 30px; font-size: 13px">请描述您的需求、想法、意见或者建议：</p>
        <div style="color: #DB7C22;line-height: 2;font-size: 14px;padding: 5px 10px; margin: 0 30px 10px;
                    border-radius: 10px;opacity: 0.9; background: none repeat scroll 0 0 #FFFCEF;">
            <form class="layui-form">
            <div class="layui-form-item" style="margin-top: 20px;">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="ignore" placeholder="请输入昵称 [选填]"
                           autocomplete="off" class="layui-input" style="width: 520px" v-model="name" :disabled="status">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red">*</span>联系邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" required lay-verify="email" placeholder="请输入真实有效的邮箱 [必填]"
                           autocomplete="off" class="layui-input" style="width: 520px" v-model="email" :disabled="status">
                </div>
                <span style="color: red;margin-left: 112px;" v-if="email == ''">联系邮箱不能为空</span>
            </div>
            <div class="layui-form-item layui-form-text" style="margin-bottom: 20px">
                <label class="layui-form-label"><span style="color: red">*</span>反馈内容</label>
                <div class="layui-input-block">
                    <textarea name="content" placeholder="请描述您遇到的问题或对本站使用的真实体验感受等等……" class="layui-textarea"
                              style="width: 520px; max-height: 170px" v-model="content" lay-verify="required"></textarea>
                </div>
                <span style="color: red;margin-left: 112px;" v-if="content == ''">反馈内容不能为空</span>
            </div>
            <div style="margin: 16px 60px 16px 0; float: right; ">
                    <button type="button" class="layui-btn layui-btn-normal" v-on:click="addFeedback" lay-submit>提交</button>
                    <button type="button" class="layui-btn layui-btn-primary" v-on:click="remove">重置</button>
            </div>
            </form>
        </div>
    </div>
</div>

<div style="margin: 10px auto; width: 770px">
    <p style="font-size: 13px; color: #777777; line-height: 1.5; padding: 5px 0;text-align: center; margin-top: 20px">
        <span>©2021 邮件来自 - </span>
        <a href="http://localhost/index.html" style="text-decoration: none;">Beehive | 蜂巢书屋 分享读书之美</a>
    </p>
</div>

<script th:inline="javascript">

    // lay-submit和v-con绑定了两个事件，会同时触发
    //<![CDATA[
    let vm = new Vue({
        el: '#app',
        data: {
            name: [[${session.loginUser != null} ? ${session.loginUser.username} : '']],
            email: [[${session.loginUser != null} ? ${session.loginUser.email} : '']],
            content: '',
            status: [[${session.loginUser != null} ? true : false]],
        },
        methods: {
            addFeedback() {
                console.log("触发了addFeedback...")
                if (this.email.length === 0 || this.content.length === 0) {
                    return ;
                }
                $.ajax({
                    url: '/feedback/add',
                    type: 'post',
                    data: JSON.stringify({name: this.name, email: this.email, content: this.content}),
                    contentType: 'application/json;charset=utf-8',
                    success: function (result) {
                        console.log(true)
                        if (result) {
                            layer.alert('BeeHive收到了您的反馈，管理员将会处理',{icon:1, shadeClose :true});
                        } else {
                            layer.alert('BeeHive收不到您的反馈，请稍后重试',{icon:0, shadeClose :true});
                        }
                        setTimeout(function() {
                            location.href = "/index";
                        }, 2200);
                    },
                    error: function () {
                        layer.alert('BeeHive开小差了，管理员在抢修中……',{icon:2, shadeClose :true});
                    }
                })
            },
            // 清空文本
            remove() {
                this.name = [[${session.loginUser != null} ? ${session.loginUser.username} : '']],
                this.email = [[${session.loginUser != null} ? ${session.loginUser.email} : '']],
                this.content = "";
            }
        }
    })
    //]]>


    layui.use(['form', 'layer'], function () {
        // let form = layui.form;
    })

</script>


</body>
</html>